<template>
  <cube-scroll class="seller" :options="scrollOptions">
    <div class="seller-content">
      <div class="content">
        <h4 class="title">{{seller.name}}</h4>
        <div class="statistical">
          <star :size="36" :score="seller.score"></star>
          <span>({{seller.ratingCount}})</span>
          <span>月售{{seller.sellCount}}单</span>
        </div>
        <div class="favorite" @click="toggleFavorite">
          <i class="icon-favorite" :class="{active: favoriteState}"></i>
          <span class="text">{{favoriteText}}</span>
        </div>
        <div class="line"></div>
        <div class="seller-info">
          <div class="item">
            <label>起送价</label>
            <p>
              <span>{{seller.minPrice}}</span>元
            </p>
          </div>
          <div class="item">
            <label>商家配送</label>
            <p>
              <span>{{seller.deliveryPrice}}</span>元
            </p>
          </div>
          <div class="item">
            <label>平均配送时间</label>
            <p>
              <span>{{seller.deliveryTime}}</span>分钟
            </p>
          </div>
        </div>
      </div>
      <split></split>
      <div class="content">
        <h4 class="title">公告与活动</h4>
        <p class="desc">{{seller.bulletin}}</p>
        <ul class="supports">
          <li class="supports-item" v-for="(support, index) in seller.supports" :key="index">
            <support-ico :size="4" :type="support.type"></support-ico>
            <span class="support-text">{{support.description}}</span>
          </li>
        </ul>
      </div>
      <split></split>
      <div class="content">
        <h4 class="title">商家实景</h4>
        <cube-scroll direction="horizontal" :options="picsOptions">
          <ul class="pics">
            <li class="item" v-for="(pic, index) in seller.pics" :key="index">
              <img width="120px" height="90px" :src="pic" />
            </li>
          </ul>
        </cube-scroll>
      </div>
      <split></split>
      <div class="content">
        <h4 class="title">商家信息</h4>
        <ul class="infos">
          <li class="item" v-for="(info, index) in seller.infos" :key="index">{{info}}</li>
        </ul>
      </div>
    </div>
  </cube-scroll>
</template>
<script>
import Star from '../star/star.vue'
import Split from '../split/split.vue'
import SupportIco from '../support-ico/support-ico.vue'
import { saveToLocal, loadFromLocal } from '../../common/js/storage.js'

export default {
  name: 'seller',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      scrollOptions: {
        click: false, // 不设置为false会点击俩次，底层用的是better-scroll，所以设置click为false
        directionLockThreshold: 0 // 当我们需要锁定只滚动一个方向的时候，我们在初始滚动的时候根据横轴和纵轴滚动的绝对值做差，当差值大于 directionLockThreshold 的时候来决定滚动锁定的方向。
      },
      picsOptions: {
        directionLockThreshold: 0,
        scrollX: true,
        stopPropagation: true
      },
      favoriteState: false
    }
  },
  created() {
    this.favoriteState = loadFromLocal(this.seller.id, 'favoriteState', false)
  },
  computed: {
    favoriteText() {
      return this.favoriteState ? '已收藏' : '收藏'
    },
    seller() {
      return this.data.seller
    }
  },
  methods: {
    toggleFavorite() {
      this.favoriteState = !this.favoriteState
      saveToLocal(this.seller.id, 'favoriteState', this.favoriteState)
    }
  },
  components: {
    Star,
    Split,
    SupportIco
  }
}
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/variable.styl'
@import '../../common/stylus/mixin.styl'

.seller
  .seller-content
    .content
      position relative
      padding 18px
      .title
        margin-bottom 8px
        line-height 14px
        font-size $fontsize-medium
        color $color-text
      .statistical
        display flex
        align-items center
        .star
          margin-right 8px
        > span
          font-size $fontsize-small-s
          color $color-text-s
          &:nth-child(2)
            margin-right 12px
      .favorite
        position absolute
        width 40px
        top 14px
        right 18px
        text-align center
        font-size 0
        .icon-favorite
          display block
          margin-bottom 4px
          line-height 24px
          font-size $fontsize-large-xxx
          color $color-text-ss
          &.active
            color $color-red
        .text
          line-height 10px
          font-size $fontsize-small-s
          color $color-text-s
      .line
        margin 18px 0 0
      .seller-info
        padding 18px 0 0
        display flex
        .item
          flex 1
          text-align center
          border-right solid 1px $color-row-line
          &:last-child
            border-right none
          label
            display block
            line-height 20px
            font-size $fontsize-small-s
            color $color-text-ss
            margin-bottom 4px
          p
            line-height 24px
            font-weight 200
            font-size $fontsize-small-s
            color $color-text
            > span
              font-weight 200
              font-size $fontsize-large-xxx
      .desc
        white-space normal
        margin 0 12px 16px
        line-height 24px
        font-weight 200
        font-size $fontsize-medium
        color $color-red
      .supports
        .supports-item
          display flex
          align-items center
          padding 16px 12px
          border-top solid 1px $color-row-line
          .support-ico
            margin-right 6px
          .support-text
            line-height 16px
            font-weight 200
            font-size $fontsize-medium
            color $color-text
      >>> .cube-scroll-content
        display inline-block
        .pics
          margin-top 4px
          white-space nowrap
          .item
            display inline-block
            margin-right 6px
      .infos
        margin-top 4px
        float left // BFC
        .item
          padding 16px 12px
          line-height 16px
          white-space normal
          border-top solid 1px $color-row-line
          font-weight 200
          font-size $fontsize-medium
          color $color-text
  .line
    border-1px($color = $color-row-line)
</style>
